import { Image, Swiper, SwiperItem, View } from '@tarojs/components';
import Taro, { usePullDownRefresh } from '@tarojs/taro';
import ChoseCityBar from '@/components/ChoseCityBar';
import { useAppSettingStore } from '@/common/hox/appSettingStore';
import { PageUrlMap } from '@/utils/enum';
import { PageUrlEnum } from '@/utils/enum';
import { getHotMovies, getUpcomingMovies } from '@/service';
import { useInitStore } from '@/common/hox/initStore';
// import { useUserStore } from '@/common/hox/userStore';
import './index.less';
import classNames from 'classnames';
import { bannerJump } from '@/utils';
import { useMemo, useState } from 'react';
import { useRequest } from 'ahooks';
import React from 'react';
import MovieCard from '../MovieCard';
import { Loading } from '@/components';
type MovieListPagePropsType = {
    extra?: React.ReactNode;
    TheaterList?: string;
};

const MovieListPage = (props: MovieListPagePropsType) => {
    const { TheaterList = PageUrlMap.get(PageUrlEnum.TheaterList) } = props;
    const [isHot, setIsHot] = useState<boolean>(true);
    const { initReady } = useInitStore();
    // const { userInfo } = useUserStore();
    // const defaultNickName = '福禄影迷';
    // const defaultAvatar = `https://fulu-media.oss-cn-hangzhou.aliyuncs.com/movie/assets/theme/img/0/default_avatar.png`;
    // 获取热门影片回调
    const getHotMoviesApi = useRequest(
        () => {
            return getHotMovies();
        },
        {
            ready: initReady,
        }
    );

    // 获取待上映影片回调
    const getUpcomingMoviesApi = useRequest(
        () => {
            return getUpcomingMovies();
        },
        {
            ready: initReady,
        }
    );

    const { banner } = useAppSettingStore();
    // 获取banner列表
    const bannerList = banner?.index.filter((item) => item.displayPosition === 0);
    // 电影类型分类
    const showMovieCategory = useMemo(() => {
        if (isHot) {
            const data = getHotMoviesApi?.data?.list || [];
            if (data) {
                return data.filter((item) => item.name.includes(''));
            }
        } else {
            const data = getUpcomingMoviesApi?.data?.list || [];
            return data;
        }
    }, [isHot, getHotMoviesApi.data, getUpcomingMoviesApi.data]);

    // 点击电影回调
    const handleMovieClick = (movie: Movie.MovieDto) => {
        TheaterList && Taro.navigateTo({ url: `${TheaterList}?movieId=${movie.id}` });
    };
    //
    // const handleActionClick = (type: string) => {};

    // 下拉刷新
    usePullDownRefresh(async () => {
        if (isHot) {
            await getHotMoviesApi?.runAsync();
        } else {
            await getUpcomingMoviesApi?.runAsync();
        }
        Taro.stopPullDownRefresh();
    });

    return (
        <View className="index-page">
            {/* 定位栏 */}
            <ChoseCityBar />
            {/* 活动弹窗 */}
            {/* banner轮播 */}
            {bannerList?.length ? (
                <Swiper
                    className="banner"
                    vertical={false}
                    circular
                    autoplay
                    indicatorDots
                    indicatorActiveColor="var(--color-main)"
                    indicatorColor="#FFF8EC"
                >
                    {bannerList.map((item, i) => {
                        return (
                            <SwiperItem key={i} onClick={() => bannerJump && bannerJump(item)}>
                                <Image className="bannerImg" src={item.picUrl} mode="aspectFill" />
                            </SwiperItem>
                        );
                    })}
                </Swiper>
            ) : null}
            {/* 用户信息 */}
            {/* <div className="box_user">
                <div className="box_user_left">
                    <div className="avatarDiv">
                        <img className="avatar" src={defaultAvatar} />
                    </div>
                    <div className="box_userinfo" onClick={() => handleActionClick('login')}>
                        <span className="username">
                            {userInfo?.nickName ? userInfo?.nickName : defaultNickName}
                        </span>
                        {!userInfo?.mobile ? (
                            <span className="user_action">登录/注册&nbsp;&gt;</span>
                        ) : (
                            <span className="user_action">查看订单&nbsp;&gt;</span>
                        )}
                    </div>
                </div>
                <div className="user_action_right">
                    <div className="idx_action" onClick={() => handleActionClick('coupon')}>
                        <div className="idx_action_img">
                            <div className="action_image_left" />
                        </div>
                        <div className="idx_action_txt">优惠券</div>
                    </div>
                    <div className="idx_action" onClick={() => handleActionClick('order')}>
                        <div className="idx_action_img">
                            <div className="action_image_right" />
                        </div>
                        <div className="idx_action_txt">电影票</div>
                    </div>
                </div>
            </div> */}
            {/* tab */}
            <div className="tabs-box">
                <div
                    className={classNames('tabs', { active: isHot })}
                    onClick={() => setIsHot(true)}
                >
                    热映影片
                    <i className={classNames('tabs-bottom', { active: isHot })}></i>
                </div>
                <div
                    className={classNames('tabs', { active: !isHot })}
                    onClick={() => setIsHot(false)}
                >
                    即将上映
                    <i className={classNames('tabs-bottom', { active: !isHot })}></i>
                </div>
            </div>

            {/* 电影列表 */}
            <div
                className={classNames('content', {
                    'border-radius-right': isHot,
                    'border-radius-left': !isHot,
                })}
            >
                {showMovieCategory && showMovieCategory.length ? (
                    showMovieCategory.map((item, _index) => {
                        const isHot = true;
                        return (
                            <React.Fragment key={item.id}>
                                {
                                    <MovieCard
                                        key={item.id}
                                        index={_index}
                                        data={item}
                                        isHot={isHot}
                                        className="cardItem"
                                        onClick={handleMovieClick}
                                    />
                                }
                            </React.Fragment>
                        );
                    })
                ) : (
                    <Loading />
                )}
            </div>
        </View>
    );
};

export default MovieListPage;
